import React, { useState, useEffect } from 'react';
import { Row, Col, Card, Statistic, Table, Tag, Space, Button } from 'antd';
import { 
  AppstoreOutlined, 
  EnvironmentOutlined, 
  RocketOutlined, 
  CheckCircleOutlined 
} from '@ant-design/icons';
import api from '../services/authService';

const Dashboard: React.FC = () => {
  const [dashboardData, setDashboardData] = useState({
    total_applications: 0,
    total_environments: 0,
    total_deployments: 0,
    active_deployments: 0,
    recent_deployments: [],
    system_status: 'healthy'
  });

  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchDashboardData();
  }, []);

  const fetchDashboardData = async () => {
    try {
      const response = await api.get('/monitoring/dashboard');
      setDashboardData(response.data);
    } catch (error) {
      console.error('Failed to fetch dashboard data:', error);
    } finally {
      setLoading(false);
    }
  };

  const columns = [
    {
      title: '应用名称',
      dataIndex: 'application_name',
      key: 'application_name',
    },
    {
      title: '环境',
      dataIndex: 'environment_name',
      key: 'environment_name',
    },
    {
      title: '版本',
      dataIndex: 'version',
      key: 'version',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        const color = status === 'success' ? 'green' : 
                     status === 'failed' ? 'red' : 
                     status === 'running' ? 'blue' : 'default';
        return <Tag color={color}>{status}</Tag>;
      },
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      key: 'created_at',
    },
  ];

  return (
    <div>
      <h1 style={{ marginBottom: 24 }}>仪表板</h1>
      
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={6}>
          <Card>
            <Statistic
              title="总应用数"
              value={dashboardData.total_applications}
              prefix={<AppstoreOutlined />}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="总环境数"
              value={dashboardData.total_environments}
              prefix={<EnvironmentOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="总部署数"
              value={dashboardData.total_deployments}
              prefix={<RocketOutlined />}
              valueStyle={{ color: '#722ed1' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="活跃部署"
              value={dashboardData.active_deployments}
              prefix={<CheckCircleOutlined />}
              valueStyle={{ color: '#cf1322' }}
            />
          </Card>
        </Col>
      </Row>

      <Row gutter={16}>
        <Col span={24}>
          <Card 
            title="最近部署" 
            extra={
              <Button type="link" onClick={fetchDashboardData}>
                刷新
              </Button>
            }
          >
            <Table
              columns={columns}
              dataSource={dashboardData.recent_deployments}
              loading={loading}
              pagination={false}
              size="small"
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Dashboard;
